import React from 'react'
import { NavLink, HashRouter as Router } from 'react-router-dom'
import './Tabbar.less'
import { withRouter } from 'react-router-dom'
class TabBar extends React.Component {
    constructor(props) {
        super(props)
        // console.log(props.location.pathname)
        this.state = {
            tabbat: [{ to: '/index', title: '首页' },
            { to: '/shop', title: '商城' },
            { to: '/shoppingCart', title: '购物车' },
            { to: '/User', title: '个人中心' }],
            id: 0
        }
    }
    tabClick(id) {
        this.setState({
            id: id
        })
    }
    componentWillMount() {
        switch (this.props.history.location.pathname) {
            case '/index/index':
                this.setState({
                    id: 0
                })
                break;
            case '/index/shop':
                this.setState({
                    id: 1
                })
                break;
            case '/index/shoppingCart':
                this.setState({
                    id: 2
                })
                break;
            case '/index/User':
                this.setState({
                    id: 3
                })
                break;
        }
    }
    render() {
        return (
            <div>
                <ul className='Tabbar'>
                    {
                        this.state.tabbat.map((val, index) => (
                            <li key={index} onClick={this.tabClick.bind(this, index)}>
                                <Router basename='/index'>
                                    <NavLink to={val.to} className={this.state.id == index ? 'p-hov center' : 'center'} replace={true}>
                                        <img alt='' src={require(`../../static/img/tabbar${index}${this.state.id == index ? '-hov' : ''}.png`)}></img>
                                        {val.title}
                                    </NavLink>
                                </Router>
                            </li>
                        ))
                    }
                </ul>
                {this.props.children}
                <div className='diandi'></div>
            </div>
        )
    }
}

export default withRouter(TabBar)